<template>
   <div class="bottomnn" v-if="!botShow">
      <div class="bottom-one">
         <h2 class="logoImg">
         </h2>
         <ul class="viewNav">
            <li>
               <dl>
                  <dt>加入我们 </dt>
                  <dd @click="clickskip">商家入驻</dd>
                  <dd @click="$router.push('/numReal')">数实一体</dd>
                  <dd @click="$router.push('/antifake')">员工防伪</dd>
               </dl>
            </li>
            <li class="viewNav-tow">
               <dl>
                  <dt>联系我们 </dt>
                  <dd>
                     <p class="bot-tt"><span>总台电话:</span>
                        <span class="span-t">0551-65629558</span>
                     </p>
                     <p class="bot-t"><span>业务合作:</span>
                        <span class="span-t">18255181518&nbsp;&nbsp;18655156808</span>
                     </p>
                  </dd>
                  <dd>
                     <p class="bot-tt"><span>采购招商:</span>
                        <span class="span-t">cgzs@wanwutong.com</span>
                     </p>
                     <p class="bot-t"><span>廉政举报:</span>
                        <span class="span-t">lianzheng@wanwutong.com</span>
                     </p>
                  </dd>
                  <dd>
                     <p class="bot-tt"><span>加入我们:</span>
                        <span class="span-t">join@wanwutong.com</span>
                     </p>
                     <p class="bot-t">
                        <span>公司地址:</span>
                        <span class="span-t">安徽省合肥市政务区蔚蓝商务港B座1417室</span>
                     </p>
                  </dd>
               </dl>
            </li>
         </ul>
      </div>
      <div class="bottom-tow">
         <p>违法和不良信息公开举报电话：0551-65629558</p>
         <p>©2010-2030 合肥万物通供应链科技有限公司 <span class="cursor" @click="clickbotm">版权所有 皖ICP备2024047485号-1</span></p>
      </div>
   </div>
   <div class="bottomnn" :style="{ height: `${hdis + 18}vw` }" v-else>
      <div class="bottom-one" :style="{ height: `${hdis}vw` }">
         <h2 class="logoImg">
         </h2>
         <ul class="viewNav">
            <li>
               <dl>
                  <dt>加入我们 <span class="iconfont icon-youjiantou" @click="showListFn"></span></dt>
                  <dd :style="{ display: `${dis ? 'block' : 'none'}` }">选品中心</dd>
                  <dd :style="{ display: `${dis ? 'block' : 'none'}` }">
                      <a href="#daping" style="color: #fff;">数实一体</a>
                  </dd>
                  <dd :style="{ display: `${dis ? 'block' : 'none'}` }">
                     <a href="weixin://dl/business/?appid=wxb2e98f2e34961bde&path=pages/homeView/index"
                        style="color: #fff;">线上商城</a>
                  </dd>
               </dl>
            </li>
            <li class="viewNav-tow">
               <dl>
                  <dt>联系我们 <span class="iconfont icon-youjiantou" @click="showListFn2"></span></dt>
                  <dd :style="{ display: `${dis2 ? 'block' : 'none'}` }">
                     <p class="bot-tt"><span>总台电话:</span>
                        <span class="span-t">0551-65629558</span>
                     </p>
                     <p class="bot-t"><span>业务合作:</span>
                        <span class="span-t">18255181518&nbsp;&nbsp;18655156808</span>
                     </p>
                  </dd>
                  <dd :style="{ display: `${dis2 ? 'block' : 'none'}` }">
                     <p class="bot-tt"><span>采购招商:</span>
                        <span class="span-t">cgzs@wanwutong.com</span>
                     </p>
                     <p class="bot-t"><span>廉政举报:</span>
                        <span class="span-t">lianzheng@wanwutong.com</span>
                     </p>
                  </dd>
                  <dd :style="{ display: `${dis2 ? 'block' : 'none'}` }">
                     <p class="bot-tt"><span>加入我们:</span>
                        <span class="span-t">join@wanwutong.com</span>
                     </p>
                     <p class="bot-t">
                        <span>公司地址:</span>
                        <span class="span-t">安徽省合肥市政务区蔚蓝商务港B座1417室</span>
                     </p>
                  </dd>
               </dl>
            </li>
         </ul>
      </div>
      <div class="bottom-tow">
         <p>违法和不良信息公开举报电话：0551-65629558</p>
         <p>©2010-2030 合肥万物通供应链科技有限公司 <span class="cursor" @click="clickbotm">版权所有 皖ICP备2024047485号-1</span></p>
      </div>
   </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
function clickskip() {
   if (botShow.value) return
   window.open(`https://www.wwtscm.com/`)
}
function clickbotm() {
   window.open(`https://beian.miit.gov.cn/#/Integrated/index`)
}
const botShow = ref(false)
function webFnFit() {
   console.log(window.innerWidth);
   if (window.innerWidth < 1000) {
      botShow.value = true
   }
}
onMounted(() => {
   webFnFit()
})
const dis = ref(true)
const hdis = ref(67)
const dis2 = ref(true)

function showListFn() {
   dis.value = !dis.value
   if (dis.value) {
      hdis.value += 18
   } else {
      hdis.value -= 18
   }
}
function showListFn2() {
   dis2.value = !dis2.value
   if (dis2.value) {
      hdis.value += 25
   } else {
      hdis.value -= 25
   }
}
</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

.bottomnn {
   box-sizing: border-box;
   color: #fff;
   padding-top: 2vw;
   font-size: $title-font-size5;
   background-color: #000;
   height: 21.2vw;

   .bottom-one {
      width: 67%;
      height: 13.6vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: start;

      .logoImg {
         width: 13.33vw;
         height: 5.73vw;
         margin-right: 6.46vw;
         background-image: url('../assets/images/gll-wwt-logo.png');
         background-repeat: no-repeat;
         background-position: left bottom;
         background-size: 13.3vw;
      }

      .viewNav {
         flex: 1;
         display: flex;

         li {
            text-align: left;
            margin-right: 3.75vw;

            &:nth-child(1) {
               flex-shrink: 0;
               width: 15%;
            }

            dt {
               color: #fff;
               font-size: $title-font-size6;
               margin-bottom: 1.77vw;
            }

            dd {
               margin-bottom: 1.26vw;
               color: #fff;
               cursor: pointer;

            }
         }

         .viewNav-tow {
            flex: 1;

            dl {
               dd {
                  display: flex;

                  .bot-tt {
                     width: 50%;
                     display: flex;

                     .span-t {
                        flex: 1;
                        color: #a6a6a6;
                        padding-left: 1vw;
                        text-align: left;
                        word-break: break-all;
                     }
                  }

                  .bot-t {
                     width: 50%;
                     display: flex;

                     .span-t {
                        flex: 1;
                        color: #a6a6a6;
                        padding-left: 1vw;
                        text-align: left;
                        word-break: break-all;
                     }
                  }
               }
            }
         }
      }
   }

   .bottom-tow {
      height: 4.5vw;
      border-top: #ada5a5 0.1vw solid;
      text-align: center;
      padding: 1vw 0;
      color: #a6a6a6;

      p {
         margin-bottom: 0.5vw;
      }
   }
}

@media screen and (max-width: 1000px) {
   .bottomnn {
      height: 40vw;
      font-size: $content-title-size2;

      .bottom-one {
         width: 90%;
         height: 25vw;
         flex-direction: column;

         .logoImg {
            display: none;
         }

         .viewNav {
            width: 100%;
            flex-direction: column;
            justify-content: space-evenly;

            li {
               text-align: left;
               margin-right: 3.75vw;
               width: 100%;

               &:nth-child(1) {
                  flex-shrink: 0;
                  width: 100%;
               }

               dt {
                  width: 100%;
                  color: #fff;
                  font-size: $banner-title-size5;
                  margin-bottom: 1.77vw;
                  display: flex;
                  justify-content: space-between;
               }

               dd {
                  display: none;
               }
            }

            .viewNav-tow {
               flex: none;
               line-height: 2;

               dl {
                  dt {
                     margin: 0;
                  }

                  dd {
                     margin: 0;

                     .bot-tt {
                        width: 100%;
                        display: flex;

                        .span-t {
                           flex: 1;
                           color: #a6a6a6;
                           padding-left: 1vw;
                           text-align: left;
                           word-break: break-all;
                        }
                     }

                     .bot-t {
                        width: 100%;
                        display: flex;

                        .span-t {
                           flex: 1;
                           color: #a6a6a6;
                           padding-left: 1vw;
                           text-align: left;
                           word-break: break-all;
                        }
                     }
                  }
               }
            }
         }
      }

      .bottom-tow {
         height: 12vw;
         font-size: $content-title-size2;
         padding: 0;
         padding-top: 2vw;

         p {
            display: flex;
            flex-direction: column;
            align-items: center;
         }
      }
   }
}
</style>